
<template>
  <div class="box admin-student">
    <van-tabs type="card" color="#454e67">
      <van-tab :title="unGradTabString">
        <div class="admin-student-header d-flex justify-content-between  align-items-center  text-center">
          <div>徒弟姓名</div>
          <div>师傅姓名</div>
          <div>总进度</div>
          <div>拜师日</div>
          <div>地区</div>
        </div>
        <div class="admin-student-tab-body">
          <scroll-view scroll-y :style="{height:contentHeight+'px'}" @scrolltolower="unGradLower">
            <div v-for="(item,i) in unGradList" :key="i" class="admin-student-item d-flex align-items-center text-center justify-content-between" @click="onClick(item)">
              <div class="user-col">
                <img class="small-avatar" :src="item.avatar | avatarUrl" />
                <div class="text-truncate">{{item.name}}</div>
              </div>
              <div class="user-col">
                <img class="small-avatar" :src="item.teacherAvatar | avatarUrl" />
                <div class="text-truncate">{{item.teacherName}}</div>
              </div>
              <div>{{item.taskProgress}}</div>
              <div>{{item.startStudyTime | date("yyyy/MM/dd")}}</div>
              <div>
                {{item.area}}
              </div>
            </div>
          </scroll-view>
        </div>
      </van-tab>
      <van-tab :title="gradTabString">
        <div class="admin-student-header d-flex justify-content-between  align-items-center  text-center">
          <div style="width:60px; text-center">姓名</div>
          <div>成绩</div>
          <div>出师日</div>
          <div>评价</div>
          <div>地区</div>
        </div>
        <div class="admin-student-tab-body">
          <scroll-view scroll-y :style="{height:contentHeight+'px'}" @scrolltolower="gradLower">
            <div v-for="(item,i) in gradList" :key="i" class="admin-student-item d-flex align-items-center text-center justify-content-between" @click="onClick(item)">
              <div class="user-col">
                <img class="small-avatar" :src="item.avatar | avatarUrl" />
                <div class="text-truncate">{{item.name}}</div>
              </div>
              <div>{{item.score}}</div>
              <div>{{item.gradTime | date("yyyy/MM/dd")}}</div>
              <div>{{item.rating}}</div>
              <div>
                {{item.area}}
              </div>
            </div>
          </scroll-view>
        </div>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
@Component
export default class StudentAdmin extends Vue {
  @Action getGradStudentAdmin;
  @Action getUnGradStudentAdmin;

  @Prop() contentHeight;
  public async onShow () {}
  public onClick (item) {
    Megalo.navigateTo({ url: '/admin/pages/student-admin/content?id=' + item.studentId + '&name=' + item.name })
  }
  public get unGradTabString () {
    var count = !this.$store.state.admin.unGradStudents
      ? 0
      : this.$store.state.admin.unGradStudents.totalCount
    return '未出师(' + count + ')'
  }
  public get gradTabString () {
    var count = !this.$store.state.admin.gradStudents
      ? 0
      : this.$store.state.admin.gradStudents.totalCount
    return '已出师(' + count + ')'
  }

  public get gradList () {
    return (
      this.$store.state.admin.gradStudents &&
      this.$store.state.admin.gradStudents.items
    )
  }

  public get unGradList () {
    return (
      this.$store.state.admin.unGradStudents &&
      this.$store.state.admin.unGradStudents.items
    )
  }

  public async created () {
    if (this.gradList === null) {
      await this.getGradStudentAdmin()
    }
    if (this.unGradList === null) {
      await this.getUnGradStudentAdmin()
    }
  }

  public async unGradLower () {
    Megalo.showLoading({
      title: '加载中'
    })
    await this.getUnGradStudentAdmin()
    Megalo.hideLoading()
  }

  public async gradLower () {
    Megalo.showLoading({
      title: '加载中'
    })
    await this.getGradStudentAdmin()
    Megalo.hideLoading()
  }
}
</script>

<style lang="stylus" scoped>
.admin-student {
  padding-top: 10px;
}

.admin-student-header {
  height: 40px;
}

.admin-student-tab-body {
  padding: 0px 0 10px;

  .admin-student-item {
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;
  }

  .admin-student-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.user-col {
  width: 60px;
}
</style>
